<template>
  <div class="login-container">
    <a-form class="login-form" ref="formRef" :model="model" :rules="rules">
      <a-form-item ref="mobile" name="mobile">
        <a-input v-model:value="model.mobile" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item ref="code" name="code">
        <a-input v-model:value="model.code" placeholder="请输入验证码" />
      </a-form-item>
      <a-form-item ref="agree" name="agree">
        <a-checkbox
          v-model:value="model.agree"
          @change="model.agree = $event.target.checked"
        >
          我已阅读并同意用户协议和隐私条款
        </a-checkbox>
      </a-form-item>

      <a-form-item>
        <a-button
          style="width:100%"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      formRef: null,
      loading: false,
      model: {
        mobile: '13911111111',
        code: '246810',
        agree: false
      }
    })

    const agreeValidate = async (rule, value, callback) => {
      if (!value) {
        return Promise.reject(new Error('请先阅读条款并同意'))
      }
      return Promise.resolve()
    }
    const rules = {
      mobile: [
        {
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        },
        {
          pattern: /^1[3456789]\d{9}$/,
          message: '请输入正确的手机号',
          trigger: 'blur'
        }
      ],
      agree: [{ validator: agreeValidate, trigger: 'change' }],
      code: [
        {
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        },
        {
          pattern: /^\d{6}$/,
          message: '验证码格式不正确',
          trigger: 'blur'
        }
      ]
    }
    const onSubmit = () => {
      state.formRef
        .validate()
        .then(async () => {
          state.loading = true
          const { mobile, code } = state.model
          await store.dispatch('login', { mobile, code })
          console.log(222222222222222222)
          router.push('/')
          // const res = await login(state.model)
          // console.log(res)
          state.loading = false
        })
        .catch(() => {
          state.loading = false
        })
    }
    return {
      ...toRefs(state),
      rules,
      onSubmit
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  .login-form {
    width: 500px;
    padding: 50px 50px 0;
    background-color: #ffffff;
  }
}
</style>
